<template>
  <!-- 新增部门的弹层 -->
  <el-dialog title="题目预览" :visible="showPreview" width="900px" :before-close="()=>$emit('update:showPreview', false)">
    <el-row>

      <el-col :span="6">【题型】：{{
          PreviewData.questionType === '1' ? '单选' : PreviewData.questionType === '2' ? '多选' : '简答'
        }}
      </el-col>
      <el-col :span="6">【编号】：{{ PreviewData.id }}</el-col>
      <el-col :span="6">【难度】：{{
          PreviewData.difficulty === '1' ? '简单' : PreviewData.questionType === '2' ? '一般' : '困难'
        }}
      </el-col>
      <el-col :span="6">【标签】：{{ PreviewData.tags }}</el-col>
      <el-col :span="6">【学科】：{{ PreviewData.subjectName }}</el-col>
      <el-col :span="6">【目录】：{{ PreviewData.directoryName }}</el-col>
      <el-col :span="6">【方向】：{{ PreviewData.direction }}</el-col>
      <el-col>
        <hr>
      </el-col>
      <el-col :span="24">【题干】：</el-col>
      <el-col style="color: blue;" v-html="PreviewData.question"><p>12</p></el-col>

      <!--单选框-->
      <el-col v-if="PreviewData.questionType==='1'">
        <el-col class="radiomum">单选题 选项：（以下选中的选项为正确答案）</el-col>
        <el-radio-group v-model="radio">
          <el-col class="radio" v-for="item in PreviewData.options" :key="item.id">
            <el-radio style="pointer-events: none;"
                      :label="item.isRight">{{ item.title }}
            </el-radio>
          </el-col>
          <el-col>

          </el-col>
        </el-radio-group>

      </el-col>
      <!--多选框-->
      <el-col v-if="PreviewData.questionType==='2'">
        <el-col class="radiomum">多选题 选项：（以下选中的选项为正确答案）</el-col>
        <el-checkbox-group v-model="checkList">
          <el-col class="radio" v-for="item in PreviewData.options" :key="item.id">
            <el-checkbox style="pointer-events: none;" :label="item.isRight">{{ item.title }}</el-checkbox>
          </el-col>
        </el-checkbox-group>
      </el-col>
      <el-col>
        <hr>
      </el-col>
      <el-col>

        【参考答案】：
        <el-button type="danger" size="small" @click="ifVideoShow=true">视频答案预览</el-button>
        <el-col v-if="ifVideoShow">
          <video :src="PreviewData.videoURL" controls="controls" class="video"></video>
        </el-col>
      </el-col>
      <el-col>
        <hr>
      </el-col>

      <el-col :span="3">

        <p> 【答案解析】：</p>
      </el-col>
      <el-col :span="3" v-html="PreviewData.answer"></el-col>

      <el-col>
        <hr>
      </el-col>
      <el-col :span="24"> 【题目备注】：{{ PreviewData.remarks }}</el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="$emit('update:showPreview', false)">关闭</el-button>

    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'previewMessage',
  props: {
    showPreview: {
      type: Boolean,
      default: false
    },
    PreviewData: {
      type: Object,
      require: true
    }
  },
  data () {
    return {
      radio: 1,
      checkList: [1],
      ifVideoShow: false

    }
  }
}
</script>
<style scoped lang="scss">
::v-deep.el-col-6 {
  padding: 10px 0;
}

::v-deep.el-dialog__body {
  height: 500px !important;
}

::v-deep.el-col-24 {
}

.video {
  height: 300px;
  width: 400px;
}

.radiomum {
  padding-bottom: 5px;

}

::v-deep.radio {
  padding: 8px 0;
}

::v-deep.ans {
  padding: 10px 0;
}
</style>
